<template>
  <div class="tab-bar">
    <nav>
      <a
        v-for="(item, index) in tabs"
        :key="index"
        :class="{
          active: index === activeIndex
        }"
        href="javascript:;"
        @click="change(index)"
      >{{item[titleKey]}}</a>
    </nav>
  </div>
</template>

<script>
export default {
  name: 'tab-bar',
  props: {
    tabs: Array,
    titleKey: {
      type: String,
      default: 'title'
    }
  },
  data () {
    return {
      activeIndex: 0
    }
  },
  methods: {
    change (index) {
      this.activeIndex = index
      this.$emit('change', index)
    }
  }
}
</script>

<style lang="scss" scoped>
.tab-bar {
  background: #fff;
  nav {
    a {
      font-size: 12px;
      color: #333;
      padding: 10px 10px;
      border-bottom: 3px solid transparent;
      background: #fff;
      display: inline-block;
      &.active {
        border-color: $color-primary;
      }
    }
  }
}
</style>
